kbd {
  box-sizing: inherit;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  padding: 2px 10px;
  height: 30px;
  margin: 4px;
  letter-spacing: 0.5px;
  color: #3a3a3a;
  background-color: #f7f7f7;
  box-shadow:
        inset 0 -2px 0 #aaaaaa,
    inset 0px 1px 1px -1px #fff,
        0px 1px 1px 0px #7a7a7a;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  transition:
    transform 0.08s ease,
    background-color 0.08s ease,
    box-shadow 0.08s ease;
  cursor: pointer;
  font-family: 'VAG Rounded W01 Thin', monospace;
  font-weight: 100;
}

kbd:hover {
  background-color: #fbfbfb;
}

kbd:before {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

kbd:active {
  transform: translateY(1.5px);
  box-shadow: 
      inset 0 -0.5px 0 #aaaaaa,
  inset 0px -1px 1px -1px #fff,
      0px 0.5px 0.75px 0px #999;
}
